import React, { Component } from "react";
import { Button, Space, Table, Tag, Row, Col, Drawer } from "antd";
import { categoryGet } from "../../api/course";
import RoleForm from "./components/role-form";
import { roleDelBatch, roleGet } from "../../api/user";
import { routeMapTool } from "../../utils/tools";
import { mainRoutes } from "../../router";
let routeMap = {};

export default class Role extends Component {
  state = {
    isOpen: false,
    roleList: [],
    recordData: null,
    delIds: [], //记录待删除的数据id
  };
  columns = [
    {
      title: "角色ID",
      dataIndex: "objectId",
      key: "objectId",
    },
    {
      title: "角色名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "角色权限",
      dataIndex: "permission",
      key: "permission",
      render: (permission) => {
        return permission.map((item) => {
          return <Tag color="magenta">{routeMap[item]}</Tag>;
        });
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              this.handleDrawer(true, record);
            }}
          >
            编辑
          </Button>
          <Button type="primary" danger size="small">
            删除
          </Button>
        </Space>
      ),
    },
  ];
  componentDidMount() {
    roleGet().then((res) => {
      this.setState({ roleList: res.data.results });
    });
    routeMap = routeMapTool(mainRoutes);
  }
  handleDrawer = (isOpen, record) => {
    this.setState({
      isOpen,
      recordData: record,
    });
  };
  // 更新表格列表
  handleUpdate = (roleId, roleObj) => {
    console.log(roleId, roleObj);
    let { roleList } = this.state;
    let idx = -1;
    for (let i = 0; i < roleList.length; i++) {
      if (roleList[i].objectId == roleId) {
        idx = i;
        break;
      }
    }
    roleObj = { ...roleObj, objectId: roleId };
    if (idx == -1) {
      roleList.push(roleObj);
    } else {
      roleList[idx] = roleObj;
    }
    this.setState({ roleList: [...roleList] });
  };
  rowSelection = {
    onChange: (selectedKeys) => {
      console.log(selectedKeys);
      this.setState({
        delIds: selectedKeys,
      });
    },
  };
  //批量删除
  handleDelBatch = () => {
    let { delIds, roleList } = this.state;
    roleDelBatch(delIds).then((res) => {
      let arr = roleList.filter((item) => !delIds.includes(item.objectId));
      this.setState({
        roleList: arr,
      });
    });
  };
  render() {
    let { isOpen, recordData, delIds } = this.state;
    return (
      <>
        <Row justify="start">
          <Col span={8}>
            <Button
              type="primary"
              onClick={() => {
                this.handleDrawer(true);
              }}
            >
              新增角色
            </Button>
            {delIds.length ? (
              <Button type="primary" danger onClick={this.handleDelBatch}>
                批量删除
              </Button>
            ) : (
              ""
            )}
          </Col>
        </Row>
        <Drawer
          title={recordData ? "修改角色" : "新增角色"}
          placement="right"
          closable={true}
          onClose={() => {
            this.handleDrawer(false, null);
          }}
          open={isOpen}
        >
          {isOpen ? (
            <RoleForm roleData={recordData} handleUpdate={this.handleUpdate} />
          ) : (
            ""
          )}
        </Drawer>
        <Table
          columns={this.columns}
          dataSource={this.state.roleList}
          rowKey="objectId"
          rowSelection={this.rowSelection}
        />
      </>
    );
  }
}
